[Day 7] css 畫一位綠色吉祥物 - 1. 頭像 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 7

Modern Web

網頁設計隨筆日記系列第 7 篇

[Day 7] css 畫一位綠色吉祥物 - 1. 頭像

14th鐵人賽

mue

2022-09-20 23:09:02

434 瀏覽

分享至

曾經看別人畫瑪利歐，也想著有天要試試看。

今天有閒沒閒，就想來畫圖！
一直沒真的用 css 畫圖過，可以拿 html 作畫，真的蠻有趣的。

只是，時間有限，今天先畫頭：

html

<body>
  <div class="yoshi">
    <div class="head">
      <!--    eye 01    -->
      <div class="eyebox-l">
         <div class="eyelid">
           <div class="eye-white">
              <div class="eye-black">
                <div class="eye-light"></div>
              </div>
           </div>
         </div>
      </div>
      
      <!--    eye 02    -->
      <div class="eyebox-r">
         <div class="eyelid">
           <div class="eye-white">
              <div class="eye-black">
                <div class="eye-light"></div>
              </div>
           </div>
         </div>
      </div>

      <!-- nose -->
      <div class="nose">
        <span class="nostril"></span>
      </div>
      
    </div>
  </div>
</body>
</html>

css

.yoshi {
    margin: 6% 10%;
  }
  .head {
  /*   background: #66c447; */
    /* background: radial-gradient(circle, #7DE35E 0%, #66c447 50%, #409323 80%,#276c0f 100%);
    border-radius: 200px;
    width: 300px;
    height: 280px;
    transform: rotate(180deg); */
    position: relative;
  }
  
  /* eye left */
  .eyebox-l {
    width: 90px;
    /* height: 80px; */
    /* border-radius: 20px 20px 50px 50px; */
    position: absolute;
    left: 100px;
    top: 0px;
  }
  .eyebox-l .eyelid {
    background: radial-gradient(circle, #7DE35E 0%, #66c447 50%, #409323 80%,#276c0f 100%);
    width: 117px;
    height: 154px;
    border-radius: 100px 100px 10px 10px;
    position: absolute;
    top: 5px;
    left: 47px;
  }
  .eyebox-l .eye-white {
    background-color: #fff;
    width: 82px;
    height: 110px;
    border-radius: 50px;
    position: absolute;
    top: 26px;
    left: 14px;
  }
  .eyebox-l .eye-black {
    background-color: #000;
    width: 27px;
    height: 36px;
    border-radius: 90% 90% 100% 100%;
    position: absolute;
    left: 28px;
    top: 22px;
  }
  .eyebox-l .eye-light {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 8px;
    top: 6px;
  }

  /* eye right */
  .eyebox-r {
    width: 90px;
    position: absolute;
    left: 210px;
    top: 0px;
  }
  .eyebox-r .eyelid {
    background: radial-gradient(circle, #7DE35E 0%, #66c447 50%, #409323 80%,#276c0f 100%);
    width: 117px;
    height: 150px;
    border-radius: 100px 100px 10px 10px;
    position: absolute;
    top: 5px;
    left: 54px;
  }
  .eyebox-r .eye-white {
    background-color: #fff;
    width: 82px;
    height: 110px;
    border-radius: 50px;
    position: absolute;
    top: 26px;
    left: 17px;
  }
  .eyebox-r .eye-black {
    background-color: #000;
    width: 27px;
    height: 36px;
    border-radius: 90% 90% 100% 100%;
    position: absolute;
    left: 28px;
    top: 22px;
  }
  .eyebox-r .eye-light {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 8px;
    top: 6px;
  }

  /* Nose */

  .nose {
    background: radial-gradient(circle, #7DE35E 0%, #66c447 50%, #409323 80%,#276c0f 100%);
    border-radius: 85% 85% 90% 88%;
    width: 330px;
    height: 280px;
    position: relative;
    top: 74px;
    left: 100px;
    text-align: center;
  }

  .nostril {
    text-align: center;
    border-radius: 100%;
    position: relative;
  }

  .nostril::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 15px;
    border-radius: 100%;
    background-color: #0e2f03;
    transform: translateY(25px) rotate(15deg);
  }
  .nostril::after {
    content: '';
    display: inline-block;
    margin-left: 20px;
    width: 8px;
    height: 15px;
    border-radius: 100%;
    background-color: #0e2f03;
    transform: translateY(25px) rotate(-15deg);
  }

會是什麼樣子呢～